<fieldset class="no-border-bottom">
  <div class="field" data-hook="previous_cards">
    <% if previous_cards.any? %>
      <% previous_cards.each do |card| %>
        <label><%= radio_button_tag :card, card.id, card == previous_cards.first %> <%= card.display_number %><br /></label>
      <% end %>
      <label><%= radio_button_tag :card, 'new', false, { id: "card_new#{payment_method.id}" } %> <%= Spree.t(:use_new_cc) %></label>
    <% end %>
  </div>

  <div id="card_form<%= payment_method.id %>" data-hook>
    <% param_prefix = "payment_source[#{payment_method.id}]" %>

    <div class="clear"></div>

    <div class="row">
      <div class="col-xs-5">
        <div data-hook="card_number">
          <div class="field">
            <%= hidden_field_tag "#{param_prefix}[cc_type]", '', {class: 'ccType'} %>
            <%= label_tag "card_number#{payment_method.id}", Spree::CreditCard.human_attribute_name(:number), class: 'required' %>
            <%= text_field_tag "#{param_prefix}[number]", '', :class => 'required fullwidth cardNumber', :id => "card_number#{payment_method.id}", :maxlength => 19 %>
            <span id="card_type" style="display:none;">
              ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
                <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
              )
            </span>
          </div>
        </div>
      </div>
      <div class="col-xs-5">
        <div data-hook="card_name">
          <div class="field">
            <%= label_tag "card_name#{payment_method.id}", Spree::CreditCard.human_attribute_name(:name), class: 'required' %>
            <%= text_field_tag "#{param_prefix}[name]", '', id: "card_name#{payment_method.id}", class: 'required fullwidth', maxlength: 19 %>
          </div>
        </div>
      </div>
      <div class="col-xs-4">
        <div data-hook="card_expiration" class="field">
          <%= label_tag "card_expiry#{payment_method.id}", Spree::CreditCard.human_attribute_name(:expiration), class: 'required' %>
          <%= text_field_tag "#{param_prefix}[expiry]", '', id: "card_expiry#{payment_method.id}", class: "required cardExpiry", placeholder: "MM / YY" %>
        </div>
      </div>
      <div class="col-xs-3">
        <div data-hook="card_code" class="field">
          <%= label_tag "card_code#{payment_method.id}", Spree::CreditCard.human_attribute_name(:card_code), class: 'required' %>
          <%= text_field_tag "#{param_prefix}[verification_value]", '', id: "card_code#{payment_method.id}", class: 'required fullwidth cardCode', size: 5 %>
          <a href="/content/cvv" class="info cvvLink" target="_blank">
            (<%= Spree.t(:what_is_this) %>)
          </a>
        </div>
      </div>
    </div>

    <div class="clear"></div>

    <%= label_tag "card_address#{payment_method.id}", Spree.t(:billing_address) %>
    <% address = @order.bill_address || @order.ship_address || Spree::Address.build_default %>
    <%= fields_for "#{param_prefix}[address_attributes]", address do |f| %>
      <%= render :partial => 'spree/admin/shared/address_form', :locals => { :f => f, :type => "billing" } %>
    <% end %>

    <div class="clear"></div>
  </div>
</fieldset>
